/**
 * @Author  : Duc Hong Quach
 * @Website : http://hongducdesign.com
 * @Date    : Friday, Feb. 17th 2012
 * @Desc    : A tiny plugin replaces the default 'placeholder' attribute on input element. In which we can change the text color using the default CSS.
 * @Example :
 *  For sample usage, just insert this line into your doucument ready script:
 *      $('input[type=text],textarea').inputToggle();
 *  You can change the text color for two states, inactive and active color. Like this:
     *  $('input[type=text],textarea').inputToggle({
            'inactive':'red',
            'active':'blue'
        });
 */
//You need an anonymous function to wrap around your function to avoid conflict
(function($){

    //Attach this new method to jQuery
    $.fn.extend({

        //This is where you write your plugin's name
        inputToggle: function(options) {

            //Set the default values, use comma to separate the settings,
            // inactiveColor : when the input is not being focused
            // active        : when the input is focused

            var defaults = {
                inactive : '#000000',
                active : '#000000'
            }

            //auto bind the new option value into the default
            var options =  $.extend(defaults, options);

            return this.each(function() {
                // this = each input
                var $this = $(this),
                    defaultValue = $this.val(),
                    opt = options;

                // In case we used the "placeholder" attritube, we replace it with the default text
                if($this.attr('placeholder')){
                    defaultValue = $this.attr('placeholder');
                    $this.val(defaultValue);
                    $this.removeAttr('placeholder');
                }

                // Set the inactive text color
                if(opt.inactive != '#000000')
                    $this.css({'color':opt.inactive});

                // focus event on the input element, clear the default text
                $this.focus(function(){
                    if($(this).val() == defaultValue){
                        $(this).val('');
                        if(opt.active != '#000000')
                          $(this).css({'color':opt.active});
                    }
                });

                // blur event on the input element, reset back to default value when leaving blank
                $this.blur(function(){
                    if($.trim($(this).val()) == ''){
                        $(this).val(defaultValue);
                        if(opt.inactive != '#000000')
                          $(this).css({'color':opt.inactive});
                    }
                })
            });
        }
    });

//pass jQuery to the function,
//So that we will able to use any valid Javascript variable name
//to replace "$" SIGN. But, we'll stick to $ (I like dollar sign: ) )
})(jQuery);